<template>
  <div class="heal">
    <div class="searchInfo">
      <!-- <a-input-search placeholder="搜索关键词"
                      @search="onSearch"
                      @pressEnter="onSearch"
                      size="large"
                      v-model="keywords"
                      enterButton /> -->
      <a-input placeholder="搜索关键词"
               v-model="keywords"
               />
      <a-button icon="search"
                @click="onSearch">
      </a-button>
    </div>

    <ul class="listInfo">
      <a @click="tohtinfo(item)"
         v-for="(item, index) in healthvideo"
         :key="index">
        <div class="li"
             @click="getbgc(index)"
             :class="{'active':ind === index}">
          <div class="borderbox"></div>
          <span class="span">{{item.title}}</span>
          <div class="time">{{item.transferTime}}</div>
        </div>
      </a>
    </ul>
    <!-- <div class="layder" v-if="showflag">
      <div class="lay-cont">
        <div class="stateimg">
          <img src="../../../static/images/indexone/state03.png" />
        </div>
        <p>当前列表暂无内容!</p>
      </div>
    </div> -->
  </div>
</template>

<script>
import urls from '../../common.js'
import { Toast } from 'mint-ui'
export default {
  data () {
    return {
      ind: '',
      cur: 0,
      healthvideo: [],
      showflag: false,
      content: '',
      keywords: ''
    }
  },
  created () {
    this.findAllVideo()
    this.cur = this.$route.query.cur || 0
  },
  methods: {
    getbgc (index) {
      this.ind = index
    },
    onSearch () {
      this.findAllVideo(this.keywords)
    },
    findAllVideo (param = '') {
      // 全院宣教
      const Qs = require('qs')
      var _this = this
      this.$http.post(urls.findHealthImageAndVideo, Qs.stringify({ 'dpId': 'health', 'type': '', 'keyWord': param }),
        {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          }
        }
      ).then(result => {
        // _this.$refs.inpSearch.blur()
        if (result.body.code === '200') {
          _this.healthvideo = result.body.data
        }
      })
    },
    tohtinfo (res) {
      if (!res.content) {
        // this.showflag = true
        // setTimeout(() => {
        //   this.showflag = false
        // }, 3000)
        Toast({
          message: '当前列表暂无内容!',
          position: 'middle',
          duration: 2000
        })
      } else {
        if (res.type === '3' || res.type === '6') {
          this.$router.push({
            query: { id: res.content, dpId: this.dpId },
            path: '/htinfo'
          })
        } else if (res.type === '4') {
          this.$router.push({
            query: { id: res.content, dpId: this.dpId },
            path: '/htvideo'
          })
        }
      }
    }
  },
  props: ['dpId']
}
</script>

<style lang="stylus" scoped>
@import '../../../static/css/color.styl';

.searchInfo {
  width: 400px;
  position: absolute;
  right: 0;
  top: 0;

  input {
    height: 42px;
    width: 300px;
    // outline: 1px solid #27ae9e;
    border: 1px solid #27ae9e;
    font-size: 20px;
  }

  button {
    height: 42px;
    margin-left: -8px;
    background-color: #27ae9e;
    color: #fff;
  }
}

.listInfo {
  margin-top: 56px;
}

ul {
  max-height: 8.4rem;
  overflow-y: auto;
}

.li {
  height: 0.7rem;
  border-radius: 0.1rem;
  background-color: $color-white;
  box-shadow: 2px 3.464px 12px 0px rgba(127, 135, 143, 0.3);
  padding: 0 0.3rem;
  line-height: 0.7rem;
  margin: 0 0.3rem 0.2rem 0.3rem;

  .borderbox {
    float: left;
    width: 0.04rem;
    height: 0.3rem;
    background-color: $color-main;
    margin: 0.2rem 0.2rem 0 0;
  }

  .span {
    font-size: 0.24rem;
    color: $color-health;
  }

  .time {
    float: right;
    font-size: 0.2rem;
    color: $color-health1;
  }
}

.active {
  background-color: $color-bgc;
}

.layder {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  .lay-cont {
    width: 4rem;
    height: 2.3rem;
    background-color: rgba(0, 0, 0, 0.4);
    margin: 4.8rem auto;
    border-radius: 0.3rem;
    color: #fff;
    text-align: center;
    padding-top: 0.4rem;

    .stateimg {
      width: 0.78rem;
      height: 0.78rem;
      margin: 0 auto 0.4rem auto;

      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
}
</style>
